<template>
    <div class="content">
        <!-- 输入框部分 -->
        <!-- 单据编号 -->
        <span class="ipt1">
            <span>单据编号：</span>
            <a-input style="width: 150px; margin-left: 10px;" placeholder="请输入单据编号" />
        </span>
        <!-- 单据日期 -->
        <span class="ipt2">
            <span>单据日期：</span>
            <a-date-picker style="width: 110px; margin-left: 10px;" @change="onChange" placeholder="请选择开始" />
            ~
            <a-date-picker style="width: 110px" @change="onChange" placeholder="请选择结束" />
        </span>
        <!-- 业务员 -->
        <span v-show="expand" style="margin-right: 100px;">
            <span>业务员：</span>
            <a-input-search placeholder="请输入业务员" size="default" @search="onSearch" style="width: 150px">
                <a-button slot="enterButton">
                    选择用户
                </a-button>
            </a-input-search>
        </span>
        <!-- 供应商输入框 -->
        <span class="ipt4" v-show="expand" style="display:inline-block; margin-top: 20px">
            <span>供应商：</span>
            <a-select style="width: 175px; display: inline-block;">
                <a-select-option value="Option1-1">
                    供应商1
                </a-select-option>
                <a-select-option value="Option1-2">
                    供应商2
                </a-select-option>
            </a-select>
        </span>

        <!-- 是否通过 -->
        <span class="ipt5" v-show="expand">
            <span>是否通过：</span>
            <a-select style="width: 80px; display: inline-block;">
                <a-select-option value="Option1-1">
                    是
                </a-select-option>
                <a-select-option value="Option1-2">
                    否
                </a-select-option>
            </a-select>
        </span>
        <!-- 是否作废 -->
        <span class="ipt6" v-show="expand">
            <span>是否作废：</span>
            <a-select style="width: 80px; display: inline-block;">
                <a-select-option value="Option1-1">
                    是
                </a-select-option>
                <a-select-option value="Option1-2">
                    否
                </a-select-option>
            </a-select>
        </span>

        <!-- 按钮部分 -->
        <span style="margin-top: 10px; margin-left: 20px">
            <a-button type="primary" icon="search">
                查询
            </a-button>
            <a-button icon="redo" style="margin-left: 10px">重置</a-button>
        </span>
        <!-- 点击下拉部分 -->
        <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            展开 <a-icon :type="expand ? 'up' : 'down'" />
        </a>
        <!-- 功能模块 -->
        <ul>
            <!-- 新增 -->
            <li @click="add">
                <a-icon type="plus" />
                <span>新增</span>
            </li>
            <!-- 导出 -->
            <li>
                <a-icon type="download" />
                <span>导出</span>
            </li>
            <!-- 导入 -->
            <li>
                <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers" @change="handleChange">
                    <a-icon type="export" style="color: #1890ff" /> <span style="color: #1890ff">
                        导入
                    </span>
                </a-upload>

            </li>
            <li>
                <span style="color: rgba(0,0,0,.65)">已选择</span>
                {{ 0 }}
                <span style="color: rgba(0,0,0,.65)">项</span>
            </li>
            <!-- 清空 -->
            <li>
                <a-icon type="delete" />
                <span>清空</span>
            </li>
        </ul>

        <!-- 自定义列表 -->
        <ul class="selflist">
            <li>
                <a-icon type="setting" />
                <span>
                    自定义列表
                </span>
            </li>
        </ul>

        <!-- 表单部分 -->
        <a-table style="width: 100%" bordered
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :data-source="buyForm"
            :pagination="ipagination1" @change="handleTableChange2" :expanded-row-keys.sync="expandedRowKeys"
            :scroll="{ x: true }">
            <a-table-column key="hasRp" title="#" data-index="hasRp" fixed="left" />
            <a-table-column key="billNo" title="单据编号" data-index="billNo" fixed="left" />
            <a-table-column key="billDate" title="单据日期" data-index="billDate" />
            <a-table-column key="sourceNo" title="源单号" data-index="sourceNo" />
            <a-table-column key="createBy_dictText" title="制单人" data-index="createBy_dictText" />
            <a-table-column key="clerkId_dictText" title="业务员" data-index="clerkId_dictText" />
            <a-table-column key="supplierId_dictText" title="供应商" data-index="supplierId_dictText" />
            <a-table-column key="billProcStatus_dictText" title="处理状态" data-index="billProcStatus_dictText" />
            <a-table-column key="isApproved_dictText" title="是否通过" data-index="isApproved_dictText" />
            <a-table-column key="isClosed_dictText" title="是否关闭" data-index="isClosed_dictText" />
            <a-table-column key="isAuto_dictText" title="是否自动" data-index="isAuto_dictText" />
            <a-table-column key="remark" title="备注" data-index="remark" />
            <a-table-column title="生效时间" data-index="" />
            <a-table-column title="审核人" data-index="" />
            <a-table-column title="流程" data-index="" />
            <a-table-column key="createTime" title="创建时间" data-index="createTime" />
            <a-table-column key="sysOrgCode_dictText" title="创建部门" data-index="sysOrgCode_dictText" />
            <a-table-column key="updateTime" title="修改时间" data-index="updateTime" />
            <a-table-column key="updateBy_dictText" title="修改人" data-index="updateBy_dictText" />

            <a-table-column title="操作" style="width:150 " data-index="action" fixed="right">

                <!-- 数据操作部分 -->
                <template slot-scope="text, record">
                    <span>
                        <a>编辑 {{ record.firstName }}</a>
                        <a-divider type="vertical" />
                        <!-- <a key="id" @click="del(record.id)">删除</a> -->
                        <template>
                            <a-popconfirm key="id" title="确定要删除这个用户?" ok-text="确认" cancel-text="取消"
                                @confirm="del(record.id)" @cancel="cancel">
                                <a href="#">删除</a>
                            </a-popconfirm>
                        </template>
                    </span>
                </template>
            </a-table-column>
        </a-table>

        <!-- 点击新增弹出的对话框 -->
        <div>
            <a-modal v-model="visible" title="采购入库-新增" @ok="handleOk" :dialog-style="{ top: '100px' }" :width="1000">
                <!-- 输入框部分 -->
                <!-- 处理状态 -->
                <span class="ipt1">
                    <span>处理状态：</span>
                    <a-select style="width: 150px; display: inline-block; " disabled placeholder="编制中">
                        <a-select-option value="Option1-1">
                            是
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            否
                        </a-select-option>
                    </a-select>
                </span>
                <!-- 是否通过 -->
                <span class="pass">
                    <span>是否通过：</span>
                    <a-select style="width: 80px; display: inline-block; " disabled>
                        <a-select-option value="Option1-1">
                            是
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            否
                        </a-select-option>
                    </a-select>
                </span>
                <!-- 是否关闭 -->
                <span class="pass">
                    <span>是否关闭：</span>
                    <a-select style="width: 80px; display: inline-block;" disabled>
                        <a-select-option value="Option1-1">
                            是
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            否
                        </a-select-option>
                    </a-select>
                </span>
                <!-- 是否作废 -->
                <span class="pass">
                    <span>是否作废：</span>
                    <a-select style="width: 80px; display: inline-block;" disabled>
                        <a-select-option value="Option1-1">
                            是
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            否
                        </a-select-option>
                    </a-select>
                </span>
                <!-- 新增点击下拉部分 -->
                <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="addtoggle">
                    展开 <a-icon :type="expand ? 'up' : 'down'" />
                </a>
                <br>
                <!-- 创建时间 -->
                <span v-show="addexpand" class="date">
                    <span>创建时间：</span>
                    <a-date-picker @change="onChange" disabled />
                </span>
                <!-- 创建人 -->
                <span v-show="addexpand" class="creater">
                    <span>创建人：</span>
                    <a-select style="width: 200px; display: inline-block; " disabled>
                    </a-select>
                </span>
                <!-- 创建部门 -->
                <span v-show="addexpand" class="date">
                    <span>创建部门：</span>
                    <a-select style="width: 200px; display: inline-block; " disabled>
                    </a-select>
                </span>
                <!-- 生效时间 -->
                <span v-show="addexpand" class="date">
                    <span>生效时间：</span>
                    <a-date-picker @change="onChange" disabled />
                </span>
                <!-- 审核人 -->
                <span v-show="addexpand" class="creater">
                    <span>审核人：</span>
                    <a-select style="width: 200px; display: inline-block; " disabled>
                    </a-select>
                </span>
                <!-- 流程 -->
                <span v-show="addexpand" class="date">
                    <span>审批流程：</span>
                    <a-select style="width: 200px; display: inline-block; " disabled>
                    </a-select>
                </span>
                <!-- 修改时间 -->
                <span v-show="addexpand" class="date">
                    <span>修改时间：</span>
                    <a-date-picker @change="onChange" disabled />
                </span>
                <!-- 修改人 -->
                <span v-show="addexpand" class="creater">
                    <span>修改人：</span>
                    <a-select style="width: 200px; display: inline-block; " disabled>
                    </a-select>
                </span>
                <!-- 是否红字 -->
                <span v-show="addexpand" class="date">
                    <span>是否红字：</span>
                    <a-select style="width: 200px; display: inline-block; " disabled>
                    </a-select>
                </span>
                <!-- 单据编号 -->
                <span class="number">
                    <span>单据编号：</span>
                    <a-input style="width: 200px" />
                </span>
                <!-- 单据日期 -->
                <span class="number">
                    <span>单据日期：</span>
                    <a-date-picker @change="onChange" />
                </span>
                <!-- 制单人 -->
                <span class="number">
                    <span>制单人：</span>
                    <a-input style="width: 200px" disabled />
                </span>

                <!-- 业务员 -->
                <span class="number">
                    <span>业务员：</span>
                    <a-input-search placeholder="请先选择用户" style="width: 200px" size="small" @search="onSearch">
                        <a-button slot="enterButton" placeholder="请先选择用户">
                            选择用户
                        </a-button>
                    </a-input-search>
                </span>
                <!-- 供应商 -->
                <span class="number">
                    <span>供应商：</span>
                    <a-select style="width: 200px; display: inline-block;">
                        <a-select-option value="Option1-1">
                            供应商1
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            供应商2
                        </a-select-option>
                    </a-select>
                </span>
                <!-- 入库经办 -->
                <span class="number">
                    <span>入库经办：</span>
                    <a-input-search placeholder="请先选择用户" style="width: 200px" size="small" @search="onSearch">
                        <a-button slot="enterButton" placeholder="请先选择用户">
                            选择用户
                        </a-button>
                    </a-input-search>
                </span>
                <!-- 源单类型 -->
                <span class="number">
                    <span>源单类型：</span>
                    <a-select style="width: 200px; display: inline-block;">
                        <a-select-option value="Option1-0" disabled>
                            请选择
                        </a-select-option>
                        <a-select-option value="Option1-1">
                            采购入库单
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            销售入库单
                        </a-select-option>
                        <a-select-option value="Option1-3">
                            应付单
                        </a-select-option>
                        <a-select-option value="Option1-4">
                            采购预付单
                        </a-select-option>
                        <a-select-option value="Option1-4">
                            采购付款单
                        </a-select-option>
                    </a-select>
                </span>
                <!-- 源单号 -->
                <span class="number">
                    <span>源单号：</span>
                    <a-input style="width: 200px" placeholder="请输入源单号" />
                </span>
                <!-- 结算数量和金额是否等于入库 -->
                <span class="number">
                    <span>结算数量和金额是否等于入库：</span>
                    <a-select style="width: 80px; display: inline-block;">
                        <a-select-option value="Option1-1">
                            是
                        </a-select-option>
                        <a-select-option value="Option1-2">
                            否
                        </a-select-option>
                    </a-select>
                </span>
                <br>
                <!-- 备注 -->
                <span>
                    <span>备注：</span>
                    <a-textarea placeholder="请输入备注" :rows="4" style="width: 900px; height:50px" />
                </span>
                <!-- 附件 -->
                <div style="margin: 20px 0px 20px 0px">
                    <span>附件：</span>
                    <a-upload name="file" :multiple="true" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :headers="headers" @change="handleChange">
                        <a-button> <a-icon type="upload" /> 点击上传 </a-button>
                    </a-upload>
                </div>
                <!-- -------------------------------------------------------------- -->
                <!-- 明细部分 -->
                <div>
                    <a-tabs default-active-key="1" @change="callback">
                        <a-tab-pane key="1" tab="明细">
                            <a-table style="width: 100%" bordered
                                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                                :data-source="buyForm" :pagination="ipagination1" @change="handleTableChange2"
                                :expanded-row-keys.sync="expandedRowKeys" :scroll="{ x: true }">
                                <a-table-column key="hasRp" title="分录号" data-index="hasRp" fixed="left" />
                                <a-table-column key="billNo" title="源单分录号" data-index="billNo" fixed="left" />
                                <a-table-column key="billDate" title="物料" data-index="billDate" />
                                <a-table-column key="sourceNo" title="计量单位" data-index="sourceNo" />
                                <a-table-column key="createBy_dictText" title="入库数量" data-index="createBy_dictText" />
                                <a-table-column key="clerkId_dictText" title="入库成本" data-index="clerkId_dictText" />
                                <a-table-column key="supplierId_dictText" title="成本含税" data-index="supplierId_dictText" />
                                <a-table-column key="billProcStatus_dictText" title="仓库"
                                    data-index="billProcStatus_dictText" />
                                <a-table-column key="isApproved_dictText" title="批次号" data-index="isApproved_dictText" />
                                <a-table-column key="isClosed_dictText" title="结算数量" data-index="isClosed_dictText" />
                                <a-table-column key="isAuto_dictText" title="含税单价" data-index="isAuto_dictText" />
                                <a-table-column key="remark" title="税率%" data-index="remark" />
                                <a-table-column title="税额" data-index="" />
                                <a-table-column title="折让金额" data-index="" />
                                <a-table-column title="折让税额" data-index="" />
                                <a-table-column key="createTime" title="结算金额" data-index="createTime" />
                                <a-table-column key="sysOrgCode_dictText" title="已开发票数量" data-index="sysOrgCode_dictText" />
                                <a-table-column key="updateTime" title="备注" data-index="updateTime" />
                                <a-table-column key="updateBy_dictText" title="备注2" data-index="updateBy_dictText" />
                                <a-table-column key="updateBy_dictText" title="备注3" data-index="updateBy_dictText" />
                            </a-table>
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
import { buyList } from '@/api/zxh'
export default {
    name: 'CaiGouRuKu',
    data() {
        return {
            // 展开功能
            expand: false,
            // 新增展开功能
            addexpand: false,
            form: this.$form.createForm(this, { name: 'advanced_search' }),
            // 分页
            ipagination1: {
                current: 1,
                pageSize: 1,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + '共' + total + '条'
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0,
            },
            // 复选框
            selectedRowKeys: [], // Check here to configure the default column
            // 采购入库内容中转站
            buyForm: [],
            expandedRowKeys: [],
            // 新增
            visible: false,
            // 点击上传附件
            headers: {
                authorization: 'authorization-text',
            },

        }

    },
    created() {
        this.getBuyForm()
    },
    updated() {
        // console.log('updated');
    },
    methods: {
        // 日期输入框
        onChange(date, dateString) {
            console.log(date, dateString);
        },
        // 点击下拉
        handleSearch(e) {
            e.preventDefault();
            this.form.validateFields((error, values) => {
                console.log('error', error);
                console.log('Received values of form: ', values);
            });
        },
        //分页
        handleTableChange2(pagination) {
            this.ipagination1.current = pagination.current
            this.ipagination1.pageSize = pagination.pageSize
        },
        // 复选框
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },

        handleReset() {
            this.form.resetFields();
        },
        // 展开下拉
        toggle() {
            this.expand = !this.expand;
        },
        // 新增展开
        addtoggle() {
            this.addexpand = !this.addexpand;
        },
        // 点击上传附件
        handleChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} file upload failed.`);
            }
        },
        // 新增方法
        add() {
            this.visible = true;
        },
        // 新增方法---确定按钮
        handleOk(e) {
            console.log(e);
            this.visible = false;
        },
        // 删除方法
        del() { },
        // 编辑方法
        edit() { },
        // 搜索方法
        onSearch() { },
        // 取消按钮
        cancel() { },
        // 获取列表信息
        async getBuyForm() {
            const p = {
                _t: JSON.stringify(Date.now()).substring(0, 10),
                column: 'createTime',
                order: 'desc',
                field: 'id,,,billNo,billDate,sourceNo,createBy_dictText,clerkId_dictText,supplierId_dictText,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10,
            }
            const res = await buyList(p)
            this.buyForm = res.result.records
            console.log('数据结果---', res)
        }
    },
    computed: {
        // 展开下拉功能
        count() {
            return this.expand ? 11 : 7;
        },
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
    },
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    min-height: 400px;
    background: #fff;
    padding: 20px;
}

.content>div {
    float: left;
}

.ipt1 {
    margin-right: 10px;
}

.ipt2 {
    margin-left: 10px;
    margin-right: 20px;
}

.ipt4 {
    margin-top: 10px;
    width: 250px;
}

.ipt5 {
    margin-top: 10px;
    width: 170px;
}

.ipt6 {
    margin-top: 10px;
    margin-left: 10px;
}

// 是否作废
.pass {
    margin: 10px 10px 10px 40px;
}

// 创建时间
.date {
    margin: 10px 10px 10px 0px;
    display: inline-block;
    width: 30%;
}

// 创建人
.creater {
    margin: 20px 10px 0px -12px;
    display: inline-block;
    width: 30%;
}

// 单据编号
.number {
    margin: 10px 10px 10px 0px;
    display: inline-block;
    width: 30%;
}

ul>li {
    float: left;
    margin: 10px;
    color: #1890ff;
    cursor: pointer;
}

.selflist>li {
    float: right;
    margin: 5px;
    color: #1890ff;
    cursor: pointer;
}
</style>